<template>
	<div>
		<el-form :model="params" label-width="80px" class="demo-ruleForm" style="width: 100%;" :inline="inLine"
			size="small">
			<span style="color: red;">{{label}}</span>
			<el-form-item v-for="(item,index) in field" :label="item.name" :prop="item.field">
				<el-input-number v-if="item.model=='inputNumber'" v-model="params[item.field]" type="number">
				</el-input-number>
				<el-input v-else-if="item.model=='input'" v-model="params[item.field]">
				</el-input>

				<template v-else-if="item.model=='inputSelect'">
					<el-input v-model="params[item.field]" :placeholder="item.info">

					</el-input>
					<div>
						<el-tag @click="selectText(params,item.field,t.name)" style="margin-right: 10px;"
							v-for="(t,ti) in item.value">{{t.name}}</el-tag>
					</div>
				</template>

				<el-radio-group v-else-if="item.model=='radioButton'" v-model="params[item.field]" fill="#409eff">
					<el-radio-button v-for="(value, ii) in item.value" :key="ii" :label="value.value">
						{{value.label}}
					</el-radio-button>
				</el-radio-group>

				<UploadImage v-model:url="params[item.field]" v-else-if="item.model=='image'"
					:disabled="item.disabled" />
				<UploadImages v-else-if="item.model=='images'" v-model:urls="params[item.field]" />

				<el-select v-model="params[item.field]" :disabled="item.disabled"
					:placeholder="item.info?item.info:'请选择'" v-else-if="item.model=='select'"
					:multiple="item.multiple!=undefined?item.multiple:false"
					:style="{width:(item.width?item.width:200)+'px'}" @change="item.fun">
					<el-option v-for="value in item.value" :key="value.value" :label="value.label" :value="value.value">
						<span style="float: left">{{ value.label }}</span>
					</el-option>
				</el-select>

			</el-form-item>
			<slot name="footer">
				<div>
				</div>
			</slot>
		</el-form>

	</div>
</template>
<script>
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted
	} from 'vue';
	import UploadImage from '/@/components/upload/UploadImage.vue'
	import UploadImages from '/@/components/upload/UploadImages.vue'
	export default {
		name: 'sizeInput',
		props: {
			field: {
				type: Array,
				default: () => {
					return []
				}
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			label: {
				type: String,
				default: ''
			},
			inLine: {
				type: Boolean,
				default: true
			}
		},
		components: {
			UploadImage,
			UploadImages
		},
		setup(props, ctx) {
			const data = reactive({

			})
			const selectText = (params, field, t) => {
				console.log('.dian l ')
				params[field] = t
			}
			return {
				selectText
			}
		}
	}
</script>
<style scoped>

</style>